<template>
  <div class="add-friend">
    <!-- <h2>添加好友</h2> -->
    <div class="header">
      <el-input
        class="input"
        v-model="keyword"
        placeholder="输入账号/手机号/昵称进行查找"
        size="large"
        clearable
      ></el-input>
      <el-button class="btn" type="primary" size="large" @click="findData"
        >查找</el-button
      >
    </div>
    <el-divider />
    <div class="content">
      <FriendItem
        v-for="item in friends"
        :key="item.userId"
        :value="{
          title: item.nickName,
          avatar: item.avatar,
          userId: item.userId,
          level: item.userLevel,
          remark: 'hello, worldabcdefabcdef',
        }"
        @add="handleAdd"
      ></FriendItem>
      <el-empty
        description="数据为空，请输入内容进行查找"
        v-if="friends.length == 0"
        style="width: 100%"
      >
        <template #image>
          <el-icon :size="100"><Search></Search></el-icon>
        </template>
      </el-empty>
    </div>
  </div>

  <el-dialog v-model="addVisible" title="申请好友" width="50%">
    <div class="add-check">
      <div class="left">
        <avatar :src="addUserInfo.avatar"></avatar>
        <LevelTag :level="addUserInfo.level"></LevelTag>
        <h2>{{ addUserInfo.title }}</h2>
        <!-- <p>{{ addUserInfo.remark }}</p> -->
      </div>
      <div class="right">
        <el-input
          v-model="addForm.message"
          type="textarea"
          :rows="5"
          placeholder="输入验证信息"
          clearable
          @change=""
        ></el-input>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="addUser"> 添加 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import FriendItem from "./FriendItem.vue";
import { addFriend, findFriends } from "@/api/friend";
import { findUserByKeyword } from "@/api/user";
import Avatar from "@/components/Avatar.vue";
import LevelTag from "@/components/LevelTag/LevelTag.vue";
const keyword = ref("");

const addForm = ref({
  message: "",
  friendId: "",
});

const friends = ref([]);

const addVisible = ref(false);
const addUserInfo = ref<any>();

async function findData() {
  if (keyword.value == "") return;
  const res = await findUserByKeyword(keyword.value);
  console.log(res);
  friends.value = res.data;
  console.log(friends.value);
}

function handleAdd(value: any) {
  console.log("handlerAdd");
  console.log(value);

  addVisible.value = true;
  addUserInfo.value = value;
}

async function addUser() {
  const res = await addFriend({
    friendId: addUserInfo.value.userId,
    message: addForm.value.message,
  });

  console.log(res);

  if (res.cdoe == 200) {
    addUserInfo.value = {};
    addVisible.value = false;
    return;
  }
}

findData();
</script>

<style scoped lang="less">
.add-friend {
  width: 100%;
  padding: 1rem;
  .header {
    display: flex;
    .input {
      flex: 4;
      margin-right: 1rem;
    }

    .btn {
      flex: 1;
      margin-left: 1rem;
    }
  }

  .content {
    // display: grid;
    // grid-template-columns: repeat(4, 1fr);
    // width: calc(100% - 2rem);
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
  }
}

.add-check {
  display: flex;
  .left {
    width: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
      white-space: nowrap;
    }
  }

  .right {
    width: 100%;
  }
}
</style>
